<template>
  <!-- 通讯录  -->
  <div class="userRelation" v-loading="phoneListLoading">
    <div class="userRelation-page" v-if="phoneListData">
      <AreaWarp :padding="false">
        <el-table
          size="mini"
          :data="phoneListData.tongList"
          style="width: 100%"
          class="pub-table"
          header-row-class-name="pub-table-header-row"
          header-cell-class-name="pub-table-header-cell"
        >
          <el-table-column prop="num" label="序号" min-width="120"></el-table-column>
          <el-table-column prop="name" label="联系人姓名" min-width="120"></el-table-column>
          <el-table-column prop="phone" label="联系号码" min-width="120"></el-table-column>
          <el-table-column label="操作" min-width="120">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="followUp(scope.row)">提醒</el-button>
            </template>
          </el-table-column>
        </el-table>
      </AreaWarp>
    </div>

    <userDueAdd
      :queryMsg="queryMsg"
      :message="message"
      v-if="dialogVisibleShow"
      @userCollection="userCollection"
    ></userDueAdd>
  </div>
</template>
<script>
import userDueAdd from "./userDueAdd.vue";
export default {
  props: ["queryMsg"],
  components: {
    userDueAdd
  },
  data() {
    return {
      phoneListLoading: false,
      dialogVisibleShow: false,
      searchInfo: {
        userId: this.queryMsg.userId,
        page: 1,
        size: 1000
      },
      phoneListData: null,
      message: null
    };
  },
  methods: {
    phoneList() {
      let that = this;
      that.phoneListLoading = true;
      that.ajaxJson({
        url: "/collection/phoneList",
        data: that.searchInfo,
        success: function(data) {
          if (data.code == "0") {
            that.phoneListData = data.data;
          }
          that.phoneListLoading = false;
        }
      });
    },
    followUp(row) {
      let that = this;
      that.message = {
        relationName: row.name,
        relationMobile: row.phone
      };
      that.dialogVisibleShow = true;
    },
    userCollection(row) {
      let that = this;
      that.dialogVisibleShow = row.dialogVisibleShow;
    }
  },
  created() {
    let that = this;
    that.phoneList();
  }
};
</script>
<style lang="less">
.userRelation {
}
</style>
